<template>
    <div id="ganji-out">
        <el-row class="ganji-top" :gutter="20">
          <el-col :span="6">
            <div class="mychart-content">
                <hezu-chart :options="hezu_info" autoresize />
            </div>
          </el-col>
          <el-col :span="6">
              <div class="mychart-content">
                <zufang-chart :options="zufang_info" autoresize theme="default"></zufang-chart>
              </div>
          </el-col>
          <el-col :span="6">
            <div class="mychart-content">
                <ershoufang-chart :options="ershoufang_info" autoresize />
            </div>
          </el-col>
          <el-col :span="6">
              <div class="mychart-content">
                <v-chart2 :options="polar2" autoresize theme="light"></v-chart2>
              </div>
          </el-col>
        </el-row>
        <!--第二行-->
        <el-row class="ganji-main" :gutter="20">
          <el-col :span="12">
            <div class="mychart-content">
              <city-pie :options="pie_for_city" autoresize></city-pie>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="mychart-content">
              <city-pie :options="polar2" autoresize></city-pie>
            </div>
          </el-col>
        </el-row>
        
        
    </div>
</template>

<script>
import axios from './../../axios'
import VECharts from './../../VEchart'

export default {
  name: 'GnJi',
  components: {
    'hezu-chart': VECharts,
    'zufang-chart': VECharts,
    'ershoufang-chart': VECharts,
    'v-chart2': VECharts,
    'city-pie': VECharts,
    // 'ber_for_city': VECharts
  },
  data () {
    return {
      citys_list: [],
      hezu_info:{
        title:{
          text:'合租数据',
           x:'center',
           y:'top'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top:'20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            name: '城市名',
            nameLocation: 'middle',
            axisTick:{
              alignWithLabel:true,
            },
            data: []
        },
        yAxis: {
            type: 'value',
            name: '数据数量(个)',
            // splitArea: {show : false},  //去除网格区域
            // splitLine: {show: false},  //去除分割线
            axisLabel: {
              formatter: function(value){
                var v = ''
                if (value >=1000) {
                  v = value/1000+'k';
                }else if(value <1000){
                  v = value;
                }
                return v
            },
          }
        },
        series: [{
            data: [],
            type: 'bar',
            barWidth: '70%',
            label:{
              show: true,
              position: 'top',
              distance:5,
            }
        }]
      },
      zufang_info:{
        title:{
          text:'租房数据',
           x:'center',
           y:'top'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
         grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            name: '城市名',
            nameLocation: 'middle',
            data: []
        },
        yAxis: {
            type: 'value',
            name: '数据数量(个)',
            axisLabel: {
              formatter: function(value){
                var v = ''
                if (value >=1000) {
                  v = value/1000+'k';
                }else if(value <1000){
                  v = value;
                }
                return v
            }
          }
        },
        series: [{
            data: [],
            type: 'bar',
            barWidth: '70%',
            label:{
              show: true,
              position: 'top',
              distance:5,
            },
            itemStyle:{
              color: function(params){
                var colorList = ["#3398db", "#434348", "#90ed7d", "#f7a35c", "#61a0a8", "#61a0a8", "#91c7ae", "#2f4554"]; 
                if(params.dataIndex % 2 == 0){
                    return colorList[0]
                }else{
                    
                    return colorList[1]
                }
              }
            }, 
        }]
      },
      ershoufang_info:{
        title:{
          text:'租房数据',
           x:'center',
           y:'top'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            name: '城市名',
            nameLocation: 'middle',
            data: []
        },
        yAxis: {
            type: 'value',
            name: '数据数量(个)',
            axisLabel: {
              formatter: function(value){
                var v = ''
                if (value >=1000) {
                  v = value/1000+'k';
                }else if(value <1000){
                  v = value;
                }
                return v
            }
          }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        series: [{
            data: [],
            type: 'bar',
            barWidth: '70%',
            label:{
              show: true,
              position: 'top',
              distance:5,
            }
        }]
      },
      polar2:{
           color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitArea: {show : false},  //去除网格区域
                    splitLine: {show: false}  //去除分割线
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330, 220]
                }
            ]
      }, 
      // 饼图
      pie_for_city:{
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
      }
    }
  },
  mounted() {

  },
  created(){
    this.get_citys_info()
    this.get_hezu_info()
    this.get_zufang_info()
    this.get_ershoufang_info()

  },
  methods: {
    get_citys_info () {
      axios.request({
      method: 'get',
      url: '/',
      }).then((res) => {
        console.log('res is >>>>')
        console.log(res.data)
        this.citys_list = res.data.result
        
      }).catch((err) => {
      console.log(err)
      })
    },
    get_hezu_info(){
      axios.request({
        method:'get',
        url:'/get_hezu_count',
      }).then((res)=>{
        console.log('get hezu info >>>>>>>>>>')
        console.log(res)
        this.hezu_info.xAxis.data = res.data.result.city_name_list
        this.hezu_info.series[0].data = res.data.result.hezu_count_list
      })
    },
    get_zufang_info(){
      axios.request({
        method:'get',
        url:'/get_zufang_count',
      }).then((res)=>{
        console.log('get zufang info >>>>>>>>>>')
        console.log(res)
        this.zufang_info.xAxis.data = res.data.result.city_name_list
        this.zufang_info.series[0].data = res.data.result.zufang_count_list
      })
    },
    get_ershoufang_info(){
      axios.request({
        method:'get',
        url:'/get_ershoufang_count',
      }).then((res)=>{
        console.log('get ershoufang info >>>>>>>>>>')
        console.log(res)
        this.ershoufang_info.xAxis.data = res.data.result.city_name_list
        this.ershoufang_info.series[0].data = res.data.result.ershoufang_count_list
      })
    },
  }

}
</script>

<style scoped lang="scss">
#ganji-out{
    width: 100%;
    .ganji-top{
        margin: 0 !important;
        height: 15rem;
        .el-col{
          height: 100%;
          .mychart-content{
            background-color: #fff;
            height: 15rem;
            width: 100%;
          }
        }
    }
    .ganji-main{
      margin: 20px 0 0 !important;
      height: 30rem;
      .el-col{
        height: 100%;
        .mychart-content{
          background-color: #fff;
          height: 100%;
        }
      }
    }
}
.echarts {
  width: 100%;
  height: 100%;
}
.el-col{
  height: 100%;
}
</style>